<template>
  <div class="dashboard-container">
    <div ref="option" class="dashboard-charts"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import * as echarts from 'echarts'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition, LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
])

export default {
  name: 'Dashboard',
  data() {
    return {
      option: {
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['总销售额', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['净利润额', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['总订单数', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2017} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2017',
              tooltip: '2017'
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getOption()
  },
  methods: {
    getOption() {
      this.chart = echarts.init(this.$refs.option)
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-charts {
    width: 100%;
    height: 500px;
  }
}
</style>
